<template>
    <div>
        <Row class="margin-top-10" :gutter="10">
            <Col :md="24" :lg="24">
                 <Card>
                    <p slot="title" class="card-title">
                        <Row class="" :gutter="10">
                            <Col :md="4" :lg="2">
                                <div style="margin-top: 2px;">
                                    <Icon type="ios-pulse"></Icon>
                                    {{this.$route.meta.title}}
                                </div>
                            </Col>
                            <Col :md="20" :lg="22">
                            
                                <ButtonGroup shape="circle">
                                    <Button :type="thistype==1?'primary':'ghost'" @click="thistype=1;getNotice()">公告中心</Button>
                                    <Button :type="thistype==2?'primary':'ghost'" @click="thistype=2;getNotice()">优惠活动</Button>
                                </ButtonGroup>
                                <Button style="float: right;" type="info" @click="addNotice">添加</Button>
                            </Col>
                        </Row>
                    </span>
                    <div class="line-chart-con">
                        <!-- <div class="ggzx" v-if="thistype==1">
                            <Button :type="ggtype==0?'primary':'ghost'" @click="ggtype=0">
                                普通公告
                            </Button>
                            <Button type="ghost" @click="jgts=true;jgTxt.txt=''">
                                极光推送
                            </Button>
                        </div> -->
                        <Table v-if="thistype==1&&ggtype==0" border stripe :columns="title" :data="data" ></Table>
                        <!-- <Table v-if="thistype==1&&ggtype==1" border stripe :columns="title" :data="data" ></Table> -->
                        <Table v-if="thistype==2" border stripe :columns="title" :data="data2" ></Table>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal
            v-model="editModal"
            title="修改"
            width="750"
            @on-ok="editOk"
            @on-cancel="editCancel">
            <Form :model="editform" :label-width="48">
                <FormItem label="标题：">
                    <Input v-model="editform.title" placeholder="请输入标题" ></Input>
                </FormItem>
                
                <!-- <FormItem label="内容：">
                    <Input v-model="editform.context" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入内容"></Input>
                </FormItem> -->
            </Form>
            <div style="margin-bottom: 15px;text-align: center;">
                <Upload
                    :before-upload="handleUpload"
                    action="//jsonplaceholder.typicode.com/posts/">
                    <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                </Upload>
                <div v-if="file !== null">上传文件: {{ file.name }}</div>
                <div style="text-align: center;color: #57a3f3;">图片尺寸375*160像素</div>
            </div>
            
            <textarea id="articleEditor"></textarea>
        </Modal>
        <Modal
            v-model="addModal"
            title="添加"
            width="750"
            @on-ok="addOk"
            @on-cancel="editCancel">
            <Form :model="editform" :label-width="48">
                <FormItem label="标题：">
                    <Input v-model="editform.title" placeholder="请输入标题" ></Input>
                </FormItem>
            </Form>
            <div style="margin-bottom: 15px;text-align: center;">
                <Upload
                    :before-upload="handleUpload"
                    action="//jsonplaceholder.typicode.com/posts/">
                    <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                </Upload>
                <div v-if="file !== null">上传文件: {{ file.name }}</div>
                <div style="text-align: center;color: #57a3f3;">图片尺寸375*160像素</div>
            </div>
            <textarea id="articleAddor"></textarea>
        </Modal>
        <Modal title="查看图片" v-model="visible">
            <img :src="thisImgUrl" v-if="visible" style="width: 100%">
        </Modal>
        <Modal title="极光推送" v-model="jgts" @on-ok="addjgts">
            <Form :model="jgTxt" :label-width="80">
                <FormItem label="推送文本：">
                    <Input v-model="jgTxt.txt" placeholder="请输入文本"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<style lang="less">
.order{
    font-size: 16px;
    margin-left: 5px;
}
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
        
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
    .ggzx{
        text-align: center;
        margin-bottom: 15px;
    }
</style>
<script>

import tinymce from 'tinymce';

export default {
    components: {
        
    },
    data () {
        return {
            jgTxt:{
                txt:''
            },
            editform:{
                title:'',
                context:''
            },
            order_param:'id',
            jgts:false,
            visible:false,
            thisImgUrl:'',
            file: null,
            thisIndex:0,
            thisForm:{},
            loadingStatus: false,
            editModal:false,
            addModal:false,
            thistype:1,
            ggtype:0,
            data:[],
            data2:[],
            title:[
                {
                    title:'标题',
                    key: 'title',
                    align:'center',
                },
                {
                    title:'发布人',
                    key: 'author',
                    align:'center',
                },
                {
                    title:'内容',
                    key: 'context',
                    align:'center',
                    render: (h, params) => {
                        return h('div',{
                            style:{
                                overflow: 'hidden',
                                textOverflow:'ellipsis',
                                whiteSpace: 'nowrap'
                            }
                        },params.row.context);
                    }
                },
                {
                    title:'图片',
                    key: '',
                    align:'center',
                    render: (h, params) => {
                        let _this=this
                        return h('div',{
                            style:{
                                height:'46px'
                            }
                        } ,[
                            h('img',{
                                domProps:{
                                    src:params.row.image_url
                                },
                                style:{
                                    width: '100%',
                                    cursor:'pointer'
                                },
                                on:{
                                    click(){
                                        _this.thisImgUrl=params.row.image_url
                                        _this.visible=true
                                    }
                                }
                            })
                        ])
                    }
                },
                {
                    title:'最近更新时间',
                    key: 'updated',
                    align:'center',
                },
                {
                    title:'发布时间',
                    key: 'created',
                    align:'center',
                },
                {
                    title:'操作',
                    key: '',
                    width: 200,
                    align:'center',
                    render: (h, params) => {
                           return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                        
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.file= null
                                            tinymce.get('articleEditor').setContent(params.row.context)
                                            this.editform.title=params.row.title
                                            this.thisForm=params.row
                                            this.thisIndex=params.index
                                            this.editModal=true
                                        },
                                    },
                                    
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.$api.delNotice({id:params.row.id}).then(response=>{
                                                    response.json().then(responseJson=> {
                                                        if(responseJson.success==true){
                                                            if(this.thistype==1){
                                                                this.data.splice(params.index,1);
                                                            }
                                                            if(this.thistype==2){
                                                                this.data2.splice(params.index,1);
                                                            }
                                                            
                                                            this.$Notice.success({
                                                                title: '删除成功'
                                                            });
                                                        }else{
                                                            this.$Notice.error({
                                                                title: '删除失败',
                                                                desc: responseJson.error
                                                            });
                                                        }
                                                    })
                                                })
                                        }
                                    }
                                },'删除')
                            ]);
                    }
                },
            ],
            title2:[
                {
                    title:'标题',
                    key: '',
                    align:'center',
                },
                {
                    title:'内容',
                    key: '',
                    align:'center',
                },
                {
                    title:'时间',
                    key: '',
                    align:'center',
                },
                {
                    title:'设备',
                    key: '',
                    align:'center',
                },
                {
                    title:'操作',
                    key: '',
                    width: 200,
                    align:'center',
                    render: (h, params) => {
                           return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                        
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                           
                                        },
                                    },
                                    
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            
                                        }
                                    }
                                },'删除')
                            ]);
                    }
                },
            ],
            title3:[
                {
                    title:'标题',
                    key: '',
                    align:'center',
                },
                {
                    title:'内容',
                    key: '',
                    align:'center',
                },
                {
                    title:'最后更新时间',
                    key: 'updated',
                    align:'center'
                },
                {
                    title:'发布时间',
                    key: 'created',
                    align:'center',
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'操作',
                    key: '',
                    width: 200,
                    align:'center',
                    render: (h, params) => {
                           return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                        
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                           tinymce.get('articleEditor').setContent(params.row.context)
                                           this.thisForm=params.row
                                           this.editModal=true
                                        },
                                    },
                                    
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            
                                                
                                            
                                        }
                                    }
                                },'删除')
                            ]);
                    }
                },
            ]
        }
    },
    computed: {
        
    },
    methods: {
        init(){
            this.getNotice()
        },
        addNotice(){
            this.editform.title=''
            tinymce.get('articleAddor').setContent('')
            this.addModal=true
        },
        handleUpload (file) {
            this.file = file;
            return false;
        },
        upload () {
            this.loadingStatus = true;
            setTimeout(() => {
                this.file = null;
                this.loadingStatus = false;
                this.$Message.success('Success')
            }, 1500);
        },
        order(key){
            this.order_param=this.order_param==key?'id':key
            this.getNotice()
        },
        getNotice(){
            let data={
                type_id:this.thistype,
                order_param:this.order_param
            }
            this.$api.getNotice(data).then(response=>{
                response.json().then(responseJson=> {
                    if(responseJson.success==true){
                        if(this.thistype==1){
                            this.data=responseJson.data
                        }else{
                            this.data2=responseJson.data
                        }
                    }else{
                        
                    }
                })
            })
        },
        editOk(){
            let form = new FormData();
            form.append("context", tinymce.get('articleEditor').getContent());
            form.append("id", this.thisForm.id);
            form.append("title", this.editform.title);
            form.append("type_id", this.thisForm.type_id);
            form.append("version", this.thisForm.version);
            if(this.file!==null){
                form.append("image_file", this.file);
            }
            this.$api.setNotice(form).then(response=>{
                response.json().then(responseJson=> {
                    if(responseJson.success==true){
                        if(this.thistype==1){
                            this.data[this.thisIndex].context=responseJson.data.context
                            this.data[this.thisIndex].title=responseJson.data.title
                            this.data[this.thisIndex].author=responseJson.data.author
                            this.data[this.thisIndex].updated=responseJson.data.updated
                        }
                        if(this.thistype==2){
                            this.data2[this.thisIndex].context=responseJson.data.context
                            this.data2[this.thisIndex].title=responseJson.data.title
                            this.data2[this.thisIndex].author=responseJson.data.author
                            this.data2[this.thisIndex].updated=responseJson.data.updated
                        }
                        
                        if(this.file!==null){
                            this.data[this.thisIndex].image_url=responseJson.data.image_url
                        }
                       this.$Notice.success({
                            title: '修改成功'
                        });
                    }else{
                        this.$Notice.error({
                            title: '修改失败',
                            desc: responseJson.error
                        });
                    }
                })
            })
        },
        addOk(){
            let form1 = new FormData();
            form1.set("type_id", this.thistype);            
            form1.set("title", this.editform.title);
            form1.set("context", tinymce.get('articleAddor').getContent());            
            if(this.file!==null){
                form1.set("image_file", this.file);
            }
            this.$api.repeater(this,'addNotice',form1).then(res=>{
                if(res.success==true){
                    if(this.thistype==1){
                        this.data.push(res.data)
                    }
                    if(this.thistype==2){
                        this.data2.push(res.data)
                    }
                    
                   this.$Notice.success({
                        title: '添加成功'
                    });
                }else{
                    this.$Notice.error({
                        title: '添加失败',
                        desc: res.error
                    });
                }
            })
            // this.$api.addNotice(form1).then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.success==true){
            //             if(this.thistype==1){
            //                 this.data.push(responseJson.data)
            //             }
            //             if(this.thistype==2){
            //                 this.data2.push(responseJson.data)
            //             }
                        
            //            this.$Notice.success({
            //                 title: '添加成功'
            //             });
            //         }else{
            //             this.$Notice.error({
            //                 title: '添加失败',
            //                 desc: responseJson.error
            //             });
            //         }
            //     })
            // })
        },
        addjgts(){
            if(this.jgTxt.txt!==''){
                this.$api.repeater(this,'addjgTxt',{txt:this.jgTxt.txt}).then(res=>{
                    if(res.success==true){
                        this.$Notice.success({
                            title: '推送成功'
                        });
                    }else{
                       
                    }
                })
                // this.$api.addjgTxt({txt:this.jgTxt.txt}).then(response=>{
                //     response.json().then(responseJson=> {
                //         if(responseJson.success==true){
                //             this.$Notice.success({
                //                 title: '推送成功'
                //             });
                //         }else{
                            
                //         }
                //     })
                // })
            }
        },
        editCancel(){

        }
    },
    mounted (){
        tinymce.init({
            selector: '#articleEditor',
            branding: false,
            elementpath: false,
            height: 400,
            language: 'zh_CN.GB2312',
            menubar: 'edit insert view format table tools',
            theme: 'modern',
            plugins: [
                'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
                'searchreplace visualblocks visualchars code fullpage',
                'insertdatetime media nonbreaking save table contextmenu directionality',
                'emoticons paste textcolor colorpicker textpattern imagetools codesample'
            ],
            toolbar1: ' newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
            autosave_interval: '20s',
            image_advtab: true,
            table_default_styles: {
                width: '100%',
                borderCollapse: 'collapse'
            }
        });
        tinymce.init({
            selector: '#articleAddor',
            branding: false,
            elementpath: false,
            height: 400,
            language: 'zh_CN.GB2312',
            menubar: 'edit insert view format table tools',
            theme: 'modern',
            plugins: [
                'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
                'searchreplace visualblocks visualchars code fullpage',
                'insertdatetime media nonbreaking save table contextmenu directionality',
                'emoticons paste textcolor colorpicker textpattern imagetools codesample'
            ],
            toolbar1: ' newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
            autosave_interval: '20s',
            image_advtab: true,
            table_default_styles: {
                width: '100%',
                borderCollapse: 'collapse'
            }
        });
        this.init()
    },
    destroyed () {
        tinymce.get('articleEditor').destroy();
        tinymce.get('articleAddor').destroy();
    }
};
</script>
